<template>
  <div class="email-template-container">
    <el-row :gutter="0">
      <!-- 左侧：模版分组 -->
      <el-col :span="5">
        <el-card shadow="hover" class="group-tree-card">
          <div slot="header" class="card-header">
            <div class="header-title">
              <i class="el-icon-folder-opened"></i>
              <span>模版分组</span>
            </div>
            <div class="header-actions">
              <el-button type="text" @click="handleAddGroup" class="add-group-btn">
                <i class="el-icon-plus"></i> 新建分组
              </el-button>
            </div>
          </div>
          <el-tree
            :data="groupTreeData"
            :props="defaultProps"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="node-label">
                 <i v-if="data.id == 0" class="el-icon-s-home tree-icon" />
                <i v-else class="el-icon-folder tree-icon" />
                {{ node.label }}
              </span>
              <span class="node-actions" v-if="data.id !== 0">
                <i class="el-icon-edit action-icon" @click.stop="() => handleUpdateGroup(data)"></i>
                <i class="el-icon-delete action-icon" @click.stop="() => handleDeleteGroup(node, data)"></i>
              </span>
            </span>
          </el-tree>
        </el-card>
      </el-col>

      <!-- 中间：模版列表 -->
      <el-col :span="9">
        <el-card shadow="hover" class="list-card">
          <div slot="header" class="card-header">
             <div class="header-title">
                <i class="el-icon-tickets"></i>
                <span>{{ currentGroupName }}</span>
             </div>
          </div>
          <!-- 搜索和操作 -->
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="模版名称" prop="templateName">
              <el-input v-model="queryParams.templateName" placeholder="请输入模版名称" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="邮件主题" prop="templateTitle">
               <el-input v-model="queryParams.templateTitle" placeholder="请输入邮件主题" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
           <div class="mb8 action-buttons">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改</el-button>
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
           </div>
          <!-- 列表 -->
          <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange" @row-click="handleRowClick" height="calc(100vh - 450px)">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="模板名称" align="left" prop="templateName" width="180" show-overflow-tooltip/>
              <el-table-column label="邮件主题" align="left" prop="templateTitle" show-overflow-tooltip width="200"/>
              <el-table-column label="模版分组" align="center" prop="materialGroupName"  width="120"/>
              <el-table-column label="邮件状态" align="center" prop="status" width="120">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    :active-value=1 :inactive-value=0
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="创建人" align="center" prop="createdName" width="100"/>
              <el-table-column label="创建时间" align="center" prop="createTime" width="160">
                  <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.createTime) }}</span>
                  </template>
              </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            class="pagination-container"
          />
        </el-card>
      </el-col>

      <!-- 右侧：模版详情 -->
      <el-col :span="10">
        <el-card shadow="hover" class="detail-card">
           <div slot="header" class="card-header">
             <div class="header-title">
                <i class="el-icon-document-copy"></i>
                <span>模版详情</span>
             </div>
           </div>
           <div v-if="selectedTemplate" class="template-detail-content">
              <el-descriptions :column="1" border size="medium">
                <el-descriptions-item label="模版名称">{{ selectedTemplate.templateName }}</el-descriptions-item>
                <el-descriptions-item label="邮件主题">{{ selectedTemplate.templateTitle }}</el-descriptions-item>
                <el-descriptions-item label="所属分组">{{ selectedTemplate.materialGroupName }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag :type="selectedTemplate.status === 1 ? 'success' : 'danger'" size="small">
                        {{ selectedTemplate.status === 1 ? '启用' : '停用' }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="创建人">{{ selectedTemplate.createdName }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ parseTime(selectedTemplate.createTime) }}</el-descriptions-item>
              </el-descriptions>
              <div class="html-preview">
                <h4>内容预览</h4>
                <div v-html="selectedTemplate.templateHtml" class="preview-box"></div>
              </div>
           </div>
           <div v-else class="empty-state">
             <i class="el-icon-info"></i>
             <p>从列表中选择一个模版查看详情</p>
           </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加或修改模版库对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="880px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="邮件模版名称" prop="templateName">
                <el-input v-model="form.templateName" placeholder="请输入模版名称" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="邮件模版分组" prop="templateGroupId">
                <el-select v-model="form.templateGroupId" placeholder="请选择分组">
                    <el-option v-for="(op, index) in fromGroup" :key="index" :label="op.groupName" :value="op.id"></el-option>
                </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="邮件主题" prop="templateTitle">
          <el-row>
            <el-col :span="18">
              <el-input v-model="form.templateTitle" placeholder="请输入模版标题" />
            </el-col>
            <el-col :span="4" :offset="1">
              <el-button type="primary" @click="selectMaterial" size="medium" >从素材库选择</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="邮件内容" prop="templateHtml" >
          <editor v-model="form.templateHtml" :min-height="350" />
        </el-form-item>
        <el-form-item label="邮件附件" prop="materialFile" >
          <FileUpload v-model="form.templateFileList" ></FileUpload>
        </el-form-item>
        <!-- <el-form-item label="邮件状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 分组管理对话框 -->
    <el-dialog :title="groupTitle" :visible.sync="groupOpen" width="500px" append-to-body>
      <el-form ref="groupForm" :model="groupForm" :rules="groupRules" label-width="80px">
        <el-form-item label="分组名称" prop="groupName">
          <el-input v-model="groupForm.groupName" placeholder="请输入分组名称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitGroupForm">确 定</el-button>
        <el-button @click="groupOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 素材选择界面 -->
    <el-dialog :title="title3" :visible.sync="open3" width="1024px" append-to-body>
      <el-form :model="queryParams3" ref="queryForm" size="small" :inline="true" v-show="showSearch3" label-width="68px">
        <el-form-item label="素材名称" prop="materialName">
          <el-input
            v-model="queryParams3.materialName"
            placeholder="请输入素材名称"
            clearable
            @keyup.enter.native="handleQuery3"
          />
        </el-form-item>
        <el-form-item label="素材类型" prop="createdId">
          <el-select v-model="queryParams3.materialType" placeholder="请选择素材类型" clearable @change="handleQuery3">
            <el-option v-for="dict in dict.type.material_type" :key="dict.value" :label="dict.label" :value="dict.value"  @change="handleQuery3"/>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" prop="createdId">
          <el-input
            v-model="queryParams3.createdId"
            placeholder="请输入创建人"
            clearable
            @keyup.enter.native="handleQuery3"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery3">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery3">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading3" :data="materialList" ref="table" @selection-change="handleSelectionChange3" max-height="400">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column v-if="false" label="id" align="center" prop="id" />
        <el-table-column label="素材名称" align="left" prop="materialName" width="180"/>
        <el-table-column label="素材图片" align="center" prop="materialPic" width="80">
          <template slot-scope="scope">
            <image-preview :src="scope.row.materialPic" :width="32" :height="45" />
          </template>
        </el-table-column>
        <el-table-column label="素材文案" align="left" prop="materialUrl" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="素材类型" align="center" prop="materialType"  width="80">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.material_type" :value="scope.row.materialType"/>
          </template>
        </el-table-column>

        <el-table-column v-if="false" label="素材内容" align="center" prop="materialContent" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" prop="createdName"  width="100"/>
      </el-table>

      <pagination
        v-show="total3>0"
        :total="total3"
        :page.sync="queryParams3.pageNum"
        :limit.sync="queryParams3.pageSize"
        @pagination="getMaterialList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm3">确 定</el-button>
        <el-button @click="cancel3">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listEmailtemplate,
  getEmailtemplate,
  addEmailtemplate,
  updateEmailtemplate,
  delEmailtemplate,
  changemailtemplateStatus
} from '@/api/email/emailtemplate'
import { addEmailtemplategroup, listEmailtemplategroup, getEmailtemplategroup, updateEmailtemplategroup, delEmailtemplategroup } from '@/api/email/emailtemplategroup'
import { listEmailmaterial } from '@/api/email/emailmaterial'
import Editor from '@/components/Editor';
import FileUpload from '@/components/FileUpload';

export default {
  name: "EmailTemplate",
  components: { Editor, FileUpload },
  dicts: ['sys_normal_disable','material_type'],
  data() {
    return {
      newGroup: '',
      fromGroup: [],
      maxHeight:0,
      // 遮罩层
      loading: true,
      loading3: true,
      // 素材列表表格数据
      materialList: [],
      title3: "",
      // 是否显示弹出层
      open3: false,
      ids3: [],
      // 非单个禁用
      single3: true,
      // 非多个禁用
      multiple3: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total3: 0,

      // 模版库表格数据
      templateList: [],
      selectedTemplate: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        templateName: null,
        templateTitle: null,
        templateHead: null,
        templateEnd: null,
        templateHtml: null,
        templateUtype: null,
        status: null,
        createUserId: null
      },
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        materialName: null,
        materialPic: null,
        materialUrl: null,
        materialType: null,
        materialContent: null,
        createdId: null
      },
      xzEmailSubjecte: '',
      xzEmailPng: '',
      xzEmailContent: '',
      xzEmailFileList: '',
      xzMaterialType: '',
      showSearch3: true,
      editorInstance: null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        templateName: [
          { required: true, message: "模版名称不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "模版状态不能为空", trigger: "change" }
        ],
        templateGroupId: [ { required: true, message: "模版分组不能为空", trigger: "change" }],
        templateTitle: [
          { required: true, message: "邮件主题不能为空", trigger: "blur" }
        ],
        templateHtml: [
          { required: true, message: "邮件内容不能为空", trigger: "blur" }
        ]
      },
      // Group Management
      groupTreeData: [],
      currentGroupId: null,
      currentGroupName: '全部模版',
      defaultProps: { children: 'children', label: 'groupName' },
      groupOpen: false,
      groupTitle: '',
      groupForm: {},
      groupRules: {
          groupName: [{ required: true, message: "分组名称不能为空", trigger: "blur" }]
      },
    };
  },
  mounted() {
    this.editorInstance = this.$refs.editor;
  },
  created() {
    this.getGroupTree();
    this.getList();
  },
  methods: {
    getMaterialList() {
      this.loading3 = true;
      listEmailmaterial(this.queryParams3).then(response => {
        this.materialList = response.rows;
        this.total3 = response.total;
        this.loading3 = false;
      });
    },
    getGroupTree() {
        listEmailtemplategroup().then(response => {
            const groups = response.rows || [];
            const tree = this.handleTree(groups, "id", "parentId");
            this.groupTreeData = [{ id: 0, groupName: '全部模版', children: tree }];
            this.fromGroup = groups;
        });
    },
    addGroup() {
      if (this.newGroup.trim() !== '') {
        addEmailtemplategroup({ groupName: this.newGroup.trim() }).then(rsp => {
          this.$modal.msgSuccess('新增分组成功')
          this.getGroups()
        }).catch(err => this.$modal.msgError('新增分组失败'))
      }
    },
    delGroup() {
      this.$modal.confirm('此操作将永久删除该分组, 是否继续?').then(_ => {
      }).catch(_ => {});
    },
    /** 查询模版库列表 */
    getList() {
      this.loading = true;
      this.queryParams.templateUtype=0;
      listEmailtemplate(this.queryParams).then(response => {
        this.templateList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        templateName: null,
        templateTitle: null,
        templateHead: null,
        templateEnd: null,
        templateHtml: null,
        status: "0",
        createTime: null,
        updateTime: null,
        createUserId: null,
        templateFileList: null,
        templateUtype: 0
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.currentGroupId = null;
      this.currentGroupName = '全部模版';
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      if (this.currentGroupId) {
        this.form.templateGroupId = this.currentGroupId;
      }
      this.open = true;
      this.title = "添加邮件模版";
    },
    handleEditorChange(value) {
      // 处理编辑器内容变化
      console.log("handleEditorChange:"+value);
      this.form.templateHtml = value;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getEmailtemplate(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改邮件模版库";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.templateUtype=0;
          this.form.status=1;
          if (this.form.id != null) {
            updateEmailtemplate(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addEmailtemplate(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除该邮件模版库吗？').then(function() {
        return delEmailtemplate(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('scrm/template/export', {
        ...this.queryParams
      }, `template_${new Date().getTime()}.xlsx`)
    },
    handleStatusChange(row) {
      let text = row.status === 1 ? "启用" : "停用";
      this.$modal.confirm('确认要' + text  + row.templateTitle + '"吗？').then(function() {
        return changemailtemplateStatus(row.id, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === 0 ? 1 : 0;
      });
    },
    selectMaterial() {
      this.loading3 = false;
      this.open3 = true;
      this.title3 = '素材选择';
    },
    /** 提交按钮 */
    submitForm3() {
      this.open3 = false;
      this.form.templateName = this.xzEmailSubjecte;
      this.form.templateTitle = this.xzEmailSubjecte;
      let htmlContent = '';
      if (this.xzEmailPng) {
        const imageUrl = process.env.VUE_APP_BASE_API + this.xzEmailPng;
        htmlContent += `<img src="${imageUrl}" style="max-width: 100%;" alt=""/><br/>`;
      }
      if (this.xzEmailContent) {
        htmlContent += this.xzEmailContent;
      }
      this.form.templateHtml = htmlContent;

      if(this.xzMaterialType === "5"){
        this.form.templateFileList=this.xzEmailFileList;
      }else
      {
        this.form.templateFileList=null;
      }

    },
    cancel3() {
      this.open3 = false;
      this.ids3 = [];
      this.single3 = [];
      this.multiple3 = [];
    },
    // 多选框选中数据
    handleSelectionChange3(selection) {

      this.ids3 = selection.map(item => item.id)
      this.single3 = selection.length !== 1
      this.multiple3 = !selection.length;

      if (selection.length > 0) {
        const item = selection[selection.length - 1]
        this.xzEmailPng = item.materialPic;
        this.xzEmailContent = item.materialContent;
        this.xzEmailSubjecte = item.materialName;
        this.xzEmailFileList = item.materialFileList;
        this.xzMaterialType = item.materialType;
      }

    },
    /** 搜索按钮操作 */
    handleQuery3() {
      this.queryParams3.pageNum = 1;
      this.getMaterialList();
    },
    /** 重置按钮操作 */
    resetQuery3() {
      this.resetForm("queryForm3");
      this.handleQuery3();
    },
    handleNodeClick(data) {
        if (data.id === 0) {
            this.currentGroupId = null;
            this.currentGroupName = '全部模版';
        } else {
            this.currentGroupId = data.id;
            this.currentGroupName = data.groupName;
        }
        this.queryParams.pageNum = 1;
        this.getList();
    },
    resetGroupForm() {
        this.groupForm = { id: null, groupName: null };
        this.resetForm("groupForm");
    },
    handleAddGroup() {
        this.resetGroupForm();
        this.groupOpen = true;
        this.groupTitle = "添加模版分组";
    },
    handleUpdateGroup(row) {
        this.resetGroupForm();
        const groupId = row.id;
        getEmailtemplategroup(groupId).then(response => {
            this.groupForm = response.data;
            this.groupOpen = true;
            this.groupTitle = "修改模版分组";
        });
    },
    handleDeleteGroup(node, data) {
        this.$modal.confirm('是否确认删除分组"' + data.groupName + '"？').then(() => {
            return delEmailtemplategroup(data.id);
        }).then(() => {
            this.getGroupTree();
            this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
    },
    submitGroupForm() {
        this.$refs["groupForm"].validate(valid => {
            if (valid) {
                if (this.groupForm.id != null) {
                    updateEmailtemplategroup(this.groupForm).then(() => {
                        this.$modal.msgSuccess("修改成功");
                        this.groupOpen = false;
                        this.getGroupTree();
                    });
                } else {
                    addEmailtemplategroup(this.groupForm).then(() => {
                        this.$modal.msgSuccess("新增成功");
                        this.groupOpen = false;
                        this.getGroupTree();
                    });
                }
            }
        });
    },
    handleRowClick(row) {
        this.selectedTemplate = row;
    },
  }
};
</script>

<style scoped>
.email-template-container {
  padding: 0px;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

/* 左侧分组列固定宽度 */
.email-template-container .el-col:first-child {
  width: 300px !important;
  min-width: 300px;
  max-width: 300px;
  flex: 0 0 300px;
}

.email-template-container .el-col:first-child .el-card {
  border-right: 1px solid #ebeef5;
}

/* 中间列表列自适应 */
.email-template-container .el-col:nth-child(2) {
  flex: 1 !important;
  width: auto !important;
}

.email-template-container .el-col:nth-child(2) .el-card {
  border-left: none;
  border-right: 1px solid #ebeef5;
}

/* 右侧详情列自适应宽度 */
.email-template-container .el-col:last-child {
  flex: 1 !important;
  width: auto !important;
}

.email-template-container .el-col:last-child .el-card {
  border-left: none;
}

.email-template-container > .el-row {
  flex-grow: 1;
  display: flex;
  margin: 0 !important;
}

.email-template-container > .el-row > .el-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
}

.email-template-container .el-card {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.email-template-container .el-card >>> .el-card__body {
  flex-grow: 1;
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
}

.header-title i {
    margin-right: 8px;
    color: #409EFF;
}

/* 统一的el-tree样式 */
.group-tree-card .el-tree {
  background-color: transparent;
}

.group-tree-card .el-tree-node {
  margin-bottom: 4px;
}

.group-tree-card >>> .el-tree-node__content {
  height: 36px !important;
  line-height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px 0 0 !important;
}

.group-tree-card .el-tree-node__expand-icon {
  padding: 6px;
}

.group-tree-card .el-tree-node__label {
  font-size: 14px;
}

.custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0px;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
}

.node-label {
  display: flex;
  align-items: center;
}

.tree-icon {
  margin-right: 8px;
  font-size: 16px;
}

.node-actions {
  display: none;
  gap: 4px;
}

.custom-tree-node:hover .node-actions {
  display: flex;
}

.action-icon {
  margin-left: 8px;
  font-size: 14px;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.action-icon:hover {
  color: #ffffff;
  background: #3b82f6;
}

/* 中间列表区域 */
.list-card >>> .el-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
  overflow: hidden;
}

.list-card .el-table {
  flex-shrink: 0;
  margin-bottom: 16px;
}

.pagination-container {
  text-align: right;
  margin-top: 16px;
  padding: 16px 0;
  flex-shrink: 0;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
  position: relative;
  z-index: 10;
}

/* 右侧详情区域 */
.template-detail-content {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.html-preview {
  margin-top: 20px;
  flex-grow: 1;
}

.preview-box {
    border: 1px solid #EBEEF5;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    height: calc(100vh - 500px);
    overflow-y: auto;
    background: #fafafa;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
  text-align: center;
}
.empty-state i {
  font-size: 50px;
  margin-bottom: 20px;
}

/* 新增分组按钮样式 */
.add-group-btn {
  color: #3b82f6;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  transition: all 0.3s ease;
  font-weight: 500;
}

.add-group-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* 表格样式优化 */
.email-template-container .el-table {
  border-radius: 4px;
  overflow: hidden;
}

.email-template-container .el-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #4a5568;
  border-bottom: 2px solid #e2e8f0;
}

.email-template-container .el-table td {
  border-bottom: 1px solid #e2e8f0;
}

.email-template-container .el-table tbody tr:hover {
  background-color: #f7fafc;
}

.email-template-container .el-table tbody tr.current-row {
  background-color: #ebf8ff;
}

/* 搜索表单样式 */
.email-template-container .el-form--inline .el-form-item {
  margin-right: 16px;
  margin-bottom: 16px;
}

.email-template-container .el-form .el-button {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.email-template-container .el-form .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 操作按钮行样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.action-buttons .el-button {
  margin-right: 0;
}
</style>
